
<template>
	<div class="wrapper">
		<swiper :options="swiperOption" v-if="swiperComputed">
			<swiper-slide v-for="item of list" :key="item.id">
				<img class="swiper-img" :src="item.imgUrl" alt="咕噜门票">
			</swiper-slide> 
			<div class="swiper-pagination"  slot="pagination"></div> 
		</swiper> 
	</div>
</template>
	 
<script>
	export default {
		name : 'HomeSwiper',
		props: {
			list : Array
		}, 
		data(){
			return {
				swiperOption : {
					pagination : '.swiper-pagination',
					loop:true
				}
			}
		},
		computed:{
			swiperComputed (){
				return this.list.length
			}
		}
		
	}
</script>



<style lang="stylus" scoped>
	.wrapper >>> .swiper-pagination-bullet-active
	 background:#fff !important
	.wrapper
	 ovflow:hidden
	 width:100%
	 height:0
	 padding-bottom:32%
	 .swiper-img
	  width:100%
	  height:100%
</style>